<template>
  <div class="app">
    <div class="top">
      <div class="title-bar">
        <span>
          <img src="/uploads/magess.png" alt />
          三香路998号10号楼(当前位置)
        </span>
      </div>
    </div>
    <div class="list" v-for="(im,index) in list" :key="index">
      <p>{{im.title}}</p>
      <div class="list1">
        <span class="tp1">
          <img :src="$baseImgUrl+'/uploads/'+im.img1" alt />
          {{im.title1}}
        </span>
        <span class="tp2">
          <img :src="$baseImgUrl+'/uploads/'+im.img" alt />
          {{im.title2}}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$api.getList(result => {
        this.list = result.data.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.app {
  width: 100vw;
  height: 800px;
  background-color: #f6f6f6;
  .list {
    width: 360px;
    height: 155px;
    // border: 1px solid red;
    margin-top: 20px;
    margin-left: 5px;
    background: #fff;
    .list1 {
      width: 100%;
      height: 100px;
    //   border: 1px solid red;
      margin-top: 0;
      position: relative;
      .tp1{
          width: 60px;
          height: 60px;
        //   border: 1px solid red;
          display: inline-block;
          position: absolute;
          top: 10px;
          left: 10px;
          img{
              width: 60px;
              height: 60px;
              display: inline-block;
          }
      }
      .tp2{
          width: 60px;
          height: 60px;
        //   border: 1px solid red;
          display: inline-block;
          position: absolute;
          top: 10px;
          left: 80px;
            img{
              width: 60px;
              height: 60px;
              display: inline-block;
          }
      }
    }
    p {
      width: 100%;
      height: 44px;
      line-height: 44px;
    //   border: 1px solid red;
      margin-top: 0;
      margin-bottom: 0;
      background: #fafafa;
    }
  }
  .top {
    width: 242px;
    height: 34px;
    border-radius: 20px;
    text-align: center;
    margin-left: 60px;
    // border: 1px solid red;
    background-color: #d1e7d3;
    position: relative;
    .title-bar {
      width: 230px;
      height: 22px;
      border-radius: 15px;
    //   border: 1px solid red;
      position: absolute;
      top: 5px;
      left: 5px;
      background: #47b34f;
      span {
        width: 100%;
        height: 22px;
        font-size: 14px;
        color: #fff;
        img {
          width: 13px;
          height: 13px;
          display: inline-block;
        }
      }
    }
  }
}
</style>
<style lang="scss">
body {
  padding: 0px;
  margin: 0px;
}
</style>